<template>
    <Search :data="searchList" @search="handleSearch"></Search>
    <Badge :data="bage" />
    <Table :header="configTableHeader" :list="list" @table="handleTable" />
    <Pagination :total="total" :page="page" :pageSize="pageSize" @pageChange="pageChange" />
    <Form v-if="flag" ref="dialog" :ddata="ruleForm.data" :form="ruleForm.form" :name="ruleForm.name"
        :flex="ruleForm.flex" :ruleForm="ruleForm" :isView="ruleForm.isView" @change="onDialogChange"
         @confirm="onDialogConfirm">
    </Form>
</template>  

<script setup lang="ts" name="Config">
import { onMounted, reactive, ref } from 'vue';
import Badge from '@/components/badge/index.vue';
import Table from '@/components/table/index.vue';
import Pagination from '@/components/pagination/index.vue';
import Search from '@/components/search/index.vue';
import Form from '@/components/form/index.vue';
import { getAllMenus, createOrUpdateMenu, deleteOneMenu } from '@/api/common/system';
import { searchConfig } from '@/config/search/configSearch.ts';
import configTable from '@/config/table/configTable'
import config from '@/hooks/useConfig';
import { formConfig } from '@/config/form/configForm.ts';
import { Message, elMessageBox } from '@/utils/tool';

const searchList = searchConfig();
let { configTableHeader } = configTable();
let { total, bage, list, menuList } = config();

let flag = ref(false);
const dialog = ref<any>();
const page = ref<number>(1);
const pageSize = ref<number>(20);
const state = ref<number>(0);
const search = ref<string>('');

let ruleForm = reactive({
    "name": "task",
    "data": {
        menu_name: '',
        path_name: '',
        pid: 0, 
        checkedKeys: [],
        icon: null,
        path: null,
        is_show: true,
        sort: ''
    },
    "form": [],
    "flex": "col"
});

const getAllMenusList = async () => {
    let result = await getAllMenus();
    ruleForm.form = formConfig(result.data);
    flag.value = true
}

const handleSearch = (event, index) => {
    if(event == "add") {
        dialog.value.showDialog(true, '添加配置');
    } else {
        menuList(index, event);
    }
}

const handleTable = (event:any, type: string) => {
    if(type === 'edit') {
        ruleForm.data.id = event.id;
        ruleForm.data.menu_name = event.menu_name;
        ruleForm.data.path_name = event.path_name;
        ruleForm.data.pid = event.pid; 
        ruleForm.data.icon = event.icon;
        ruleForm.data.path = event.path;
        ruleForm.data.sort = event.sort;
        ruleForm.data.is_show = event.is_show === '正常' ? true : false;
        ruleForm.data.checkedKeys = event.link_id
        
        dialog.value.showDialog(true, '修改配置')
    }else{
        elMessageBox(event.menu_name, event.delete_time, (result: any) => {
            if(result) {
                deleteOneMenu(event.id).catch(() =>{
                    Message(event.delete_time ? '恢复成功': '删除成功', 'success');
                    menuList();
                });
            }
        });
    }
}

const pageChange = (event: number, type: string) => {
    let changeType = "page";

    if (type == 'sizeChange')
        changeType = "pageSize";

    menuList(event, changeType);    
}

const onDialogChange = (event, index, data) => { }

const onDialogConfirm = (formData, title) => { 
    formData.is_show = formData.is_show ? 1 : 0;
    createOrUpdateMenu(formData).then(() => {
        Message(`${title}成功`, 'success');
        dialog.value.showDialog(false, '');
        menuList();
    });
}

onMounted(() => {
    getAllMenusList();
});
</script>